<template>
  <div id="app">
    <table class="tb">
      <caption>vue-收银系统</caption>
      <thead>
        <th>
          <td>苹果￥10/斤,全场8折</td>
        </th>
      </thead>
      <tbody>
        <tr>
          <td>输入你买的斤数：<input type="number" v-model.number="weight"></td>
        </tr>
         <tr>
         <button @click="sum">结账</button>
        </tr>
        <tr>
         总账单：总价：{{total}}元,折后价：{{disprice}}元,省了：{{diffrence}}元
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
data(){
  return {
    weight:0,
    total: 0,
    disprice:0,
    diffrence:0,

  }
},
methods:{
  sum(){
    if (this.weight <= 0) return alert('请输入正确的斤数')
    this.total = this.weight * 10
    this.disprice = this.total * (8 / 10) 
    this.diffrence = this.total - this.disprice
  }
}
}
</script>

<style scoped>
#app {
  width: 600px;
  margin: 10px auto;
}

.tb {
  border-collapse: collapse;
  width: 100%;
}

.tb th {
  background-color: #0094ff;
  color: white;
}

.tb td,
.tb th {
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}
</style>
